import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
import member from "@src/store/member";
import { getWxaQrCode } from "@src/api/member";
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: [{
    store: member,
    fields: ['name', 'categoryImage']
  }],
  properties: {
    detail: Object
  },
  data: {
    canvasTemplate: null,
    shareImg: null,
  },
  lifetimes: {
    ready() {
      this.fetchData();
    }
  },
  methods: {
    handleImageOk(e) {
      this.setData({ shareImg: e.detail.path });
      this.triggerEvent('full-img', { shareImg: e.detail.path })
    },
    handleSimpleImgOk(e) {
      this.setData({ shareImg: e.detail.path });
      this.triggerEvent('simple-img', { shareImg: e.detail.path })
    },
    fetchData() {
      let data = {
        page: `pages/sendCard/main`,
        scene: this.data.detail.receiveCode
      };
      getWxaQrCode(data).then(res => {
        if (res.code === 0) {
          this.setData({ wxaQrCode: res.data });
          this.initFullPoster();
          this.initSimplePoster();
        } else {
          wx.showToast({ title: "二维码获取错误", icon: "none", duration: 3000 });
        }
      })
    },
    initFullPoster() {
      this.updateStoreBindings();
      let toFullUrl = getApp().toFullUrl
      let defaultWidth = 750; //生产海报的宽度
      let defaultHeight = 1333;
      let canvasTemplate = {
        background: toFullUrl("/wxapp/static/other/poster-bg.png"),
        width: defaultWidth + "rpx",
        height: defaultHeight + "rpx",
        borderRadius: "17rpx",
        views: [
          {
            type: "text",
            text: this.data.detail.blessing,
            css: {
              top: "120rpx",
              left: (defaultWidth - 614) / 2 + "rpx",
              width: "614rpx",
              color: "#424242",
              lineHeight: "50rpx",
              fontSize: "36rpx",
              borderRadius: "17rpx"
            }
          },
          {
            type: "text",
            text: `-- ${this.data.name}`,
            css: {
              top: "360rpx",
              left: (defaultWidth - 614) / 2 + "rpx",
              width: "614rpx",
              textAlign: "right",
              height: "192rpx",
              fontSize: "36rpx",
              color: "#424242",
              lineHeight: "70rpx"
            }
          }, {
            //二维码
            type: "image",
            url: this.data.wxaQrCode,
            css: {
              top: "780rpx",
              left: "235rpx",
              width: "286rpx",
              height: "286rpx"
            }
          },
          {
            type: "text",
            text: this.data.detail.categoryName,
            css: {
              top: "1080rpx",
              left: "0rpx",
              width: defaultWidth + "rpx",
              textAlign: "center",
              fontSize: "44rpx",
              color: "#4BC2B3",
              maxLines: 2,
              lineHeight: "40rpx"
            }
          },
          {
            type: "text",
            text: "微信识别二维码领取",
            css: {
              top: "1180rpx",
              left: "0rpx",
              width: defaultWidth + "rpx",
              textAlign: "center",
              fontSize: "32rpx",
              color: "#424242"
            }
          }
        ]
      };
      this.setData({ canvasTemplate: canvasTemplate })
    },
    initSimplePoster() {
      let toFullUrl = getApp().toFullUrl
      let defaultWidth = 745;
      let defaultHeight = 596;
      let canvasTemplate = {
        background: toFullUrl("/wxapp/static/posterAndShare/sendcard-post-bg.png"),
        width: defaultWidth + "rpx",
        height: defaultHeight + "rpx",
        views: [
          {
            type: "image",
            url: toFullUrl(this.data.detail.cardImg),
            css: {
              top: "92rpx",
              left: (defaultWidth - 505) / 2 + "rpx",
              width: "505rpx",
              height: "313rpx",
              mode: "aspectFill",
              borderRadius: "17rpx"
            }
          },
          {
            type: "text",
            text: this.data.detail.blessing,
            css: {
              top: "454rpx",
              left: "0rpx",
              width: defaultWidth + "rpx",
              textAlign: "center",
              fontSize: "36rpx",
              color: "#000000",
              lineHeight: "50rpx"
            }
          }
        ]
      };
      this.setData({ canvasTemplateSimple: canvasTemplate })
    }
  }
})
